<template>
	<view class="container">
		<Head class="head" :isBackIcon="false" :title="title" :scrollTop="scrollTop"></Head>
		<!-- <view class="tags card" :style="{top:headHeight+'rpx'}">
			<view style="padding: 24rpx;">
				<view class="price_tags">
					<view class="text">价 格:</view>
					<view class="tags_box">
						<view v-for="(item,index) in carLabel" :key="index"
							:class="priceIndex === index ? 'tag_select' :'tag_item'" @click="onCut(index,'priceIndex')">
							{{item.label}}
						</view>
					</view>
				</view>
				<view class="price_tags">
					<view class="text">车 型:</view>
					<view class="tags_box">
						<view v-for="(item,index) in priceLabel" :key="index"
							:class="carIndex === index ? 'tag_select':'tag_item'" @click="onCut(index,'carIndex')">
							{{item.label}}
						</view>
					</view>
				</view>
			</view>
		</view> -->
		<view class="" style="position: relative;" :style="{top:(headHeight+300)+'rpx'}" >
			<view class="car_list_box" v-for="(item,index) in rankList" :key="index">
				<view class="card">
					<view class="car_item">
						<view class="ranking">
							<image v-if="index === 0" src="../../static/first_icon1.png"></image>
							<image v-else-if="index === 1" src="../../static/second_icon2.png"></image>
							<image v-else-if="index === 2" src="../../static/thirdly_icon3.png"></image>
							<text v-else>{{index+1}}</text>
						</view>
						<view class="right_box">
							<image :src="item.carImg" class="img"></image>
							<view class="car_describe">
								<view class="title">{{item.carName}}</view>
								<view class="price">{{item.carPrice}}</view>
								<view class="sales_box">
									<image src="../../static/car_market_icon.png"></image>
									<view>{{item.carSales}}</view>
								</view>
							</view>
						</view>
					</view>
			
				</view>
			</view>
		</view>
		

		<TabBer currentPath="/pages/carSource/index" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				rankList:[
					{
						carImg:'../../static/car01.png',
						carName:'秦PLUS',
						carPrice:'7.98-18.99万',
						carSales:27851
					},
					{
						carImg:'../../static/car02.png',
						carName:'Model Y',
						carPrice:'25.89-36.39万',
						carSales:22537
					},
					{
						carImg:'../../static/car03.png',
						carName:'问界M7',
						carPrice:'24.98-32.98万',
						carSales:19878
					},
					{
						carImg:'../../static/car04.png',
						carName:'轩逸',
						carPrice:'10.86-17.49万',
						carSales:17303
					},
					{
						carImg:'../../static/car05.png',
						carName:'长安CS75 PLUS',
						carPrice:'11.79-15.49万',
						carSales:27851
					}
				],
				carLabel: [{
						label: '全部',
						value: undefined,
					},
					{
						label: '5万以内',
						value: '5'
					},
					{
						label: '5-10万',
						value: '5-10'
					},
					{
						label: '10-15万',
						value: '10-15'
					},
					{
						label: '15-20万',
						value: '15-20'
					}
				],
				priceIndex: 0,
				priceLabel: [{
						label: '全部',
						value: undefined,
					},
					{
						label: '轿车',
						value: 1
					},
					{
						label: '新能源',
						value: 2
					},
					{
						label: 'SUV',
						value: 3
					},
					{
						label: 'MPV',
						value: 4
					}
				],
				carIndex: 0,
				list: [],
				scrollTop: 0,
				title: '',
				headHeight: 0,
			}
		},
		onPageScroll({
			scrollTop
		}) {
			if (scrollTop > 30) {
				this.title = '销量排行榜';
			} else {
				this.title = '';
			}
			this.scrollTop = scrollTop;
		},
		async mounted() {
			const result = await (() => {
				return new Promise((resolve) => {
					setTimeout(() => {
						uni.createSelectorQuery()
							.select('.head')
							.boundingClientRect()
							.exec((res) => {
								resolve(res[0].height)
							})
					}, 60);
				})
			})();
			this.headHeight = result * 1.5;
		},
		methods: {
			onCut(index, type) {
				if (type === 'priceIndex') {
					this.priceIndex = index;
				} else {
					this.carIndex = index;
				}
			}
		}
	}
</script>
<style>
	page {
		background-color: #F5F7FA;
	}
</style>
<style lang="less" scoped>
	.container {
		background-image: url('../../static/car_bg.png');
		background-repeat: no-repeat;
		background-size: 100% 800rpx;

		.tags {
			position: sticky;
			// top: 0;
			left: 0;
			width: 95%;
			margin: auto;
			z-index: 10;
			/* #ifdef H5 */
			margin-top: 339rpx;
			/* #endif */
			/* #ifdef APP-PLUS */
			margin-top: 240rpx;
			/* #endif */

			.price_tags {
				display: flex;
				align-items: center;
				margin-top: 24rpx;

				.text {
					color: #292929;
					font-weight: 500;
					margin-right: 16rpx;
					font-size: 24rpx;
				}

				.tags_box {
					display: flex;

					.tag_select,
					.tag_item {
						padding: 8rpx;
						background: #F7F8FA;
						border-radius: 4rpx;
						margin-right: 16rpx;
						font-size: 24rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #292929;
					}

					.tag_select {
						background: #F5E3D7;
					}
				}
			}

		}

		.car_list_box {
			width: 94%;
			margin: 24rpx auto;

			.car_item {
				display: flex;
				align-items: center;
				padding: 24rpx;

				.img {
					width: 192rpx;
					height: 160rpx;
					border-radius: 16rpx;
					margin-right: 24rpx;
				}

				.ranking {
					width: 10%;
					text-align: center;
					margin-right: 20rpx;

					image {
						width: 48rpx;
						height: 48rpx;
					}

					text {
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						font-size: 40rpx;
						color: #EB5E00;
					}
				}

				.right_box {
					display: flex;
					width: 90%;

					.car_describe {
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.title {
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							font-size: 36rpx;
							color: #292929;
						}

						.price {
							font-family: DINAlternate, DINAlternate;
							font-weight: bold;
							font-size: 28rpx;
							color: #FF3341;
						}

						.sales_box {
							width: 224rpx;
							height: 40rpx;
							display: flex;
							align-items: center;
							justify-content: flex-start;
							font-family: DINAlternate, DINAlternate;
							font-weight: bold;

							image {
								width: 104rpx;
								height: 40rpx;
							}

							view {
								border-top: 2rpx solid #F5D9BA;
								border-right: 2rpx solid #F5D9BA;
								border-bottom: 2rpx solid #F5D9BA;
								color: #FF6600;
								font-size: 28rpx;
								border-radius: 0 8rpx 8rpx 0;
								padding: 0 8rpx;
							}
						}
					}
				}
			}
		}
	}
</style>